<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加活动</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#722ED1',
                        neutral: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                        'card-hover': '0 20px 40px -5px rgba(0, 0, 0, 0.15)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply border-primary ring-2 ring-primary/20 transition-all duration-300;
            }
            .btn-hover-effect {
                @apply transform hover:scale-[1.02] active:scale-[0.98] transition-all duration-300;
            }
            .form-container-bg {
                background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
            }
            .input-bg {
                background-color: rgba(255, 255, 255, 0.7);
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 font-inter text-dark">
<!-- 装饰元素 -->
<div class="fixed -top-20 -right-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
<div class="fixed -bottom-32 -left-32 w-80 h-80 bg-secondary/10 rounded-full blur-3xl"></div>

<div class="relative min-h-screen flex flex-col items-center justify-center p-4 md:p-8 z-10">
    <!-- 页面标题 -->
    <div class="text-center mb-8 md:mb-12">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent mb-2">
            添加活动
        </h1>
        <p class="text-gray-600 max-w-md">创建一个引人注目的活动，吸引更多志愿者参与</p>
    </div>

    <!-- 表单卡片 -->
    <div class="w-full max-w-2xl form-container-bg rounded-2xl shadow-card hover:shadow-card-hover transition-all duration-500 overflow-hidden">
        <!-- 卡片头部 -->
        <div class="bg-gradient-to-r from-primary to-accent p-6 md:p-8 text-white">
            <div class="flex items-center">
                <div class="bg-white/20 p-3 rounded-full mr-4">
                    <i class="fa fa-calendar-plus-o text-2xl"></i>
                </div>
                <div>
                    <h2 class="text-xl md:text-2xl font-bold">活动信息</h2>
                    <p class="text-white/80 text-sm">填写以下表单创建您的活动</p>
                </div>
            </div>
        </div>

        <!-- 表单内容 -->
        <form id="addActivityForm" class="p-6 md:p-8 space-y-6">
            <!-- 基础信息 -->
            <div class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label for="title" class="block text-sm font-medium text-gray-700">活动标题 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                <i class="fa fa-header"></i>
                            </div>
                            <input type="text" id="title" name="title" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus" required>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="cover_image" class="block text-sm font-medium text-gray-700">封面图片链接</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                <i class="fa fa-image"></i>
                            </div>
                            <input type="text" id="cover_image" name="cover_image" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus">
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="description" class="block text-sm font-medium text-gray-700">活动描述</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                            <i class="fa fa-align-left"></i>
                        </div>
                        <textarea id="description" name="description" rows="3" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus resize-none"></textarea>
                    </div>
                </div>
            </div>

            <!-- 时间信息 -->
            <div class="space-y-6">
                <h3 class="text-lg font-semibold text-gray-800">时间安排</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label for="start_time" class="block text-sm font-medium text-gray-700">开始时间 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="datetime-local" id="start_time" name="start_time" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus" required>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="end_time" class="block text-sm font-medium text-gray-700">结束时间 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                <i class="fa fa-calendar-check-o"></i>
                            </div>
                            <input type="datetime-local" id="end_time" name="end_time" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus" required>
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="registration_deadline" class="block text-sm font-medium text-gray-700">报名截止时间 <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                            <i class="fa fa-clock-o"></i>
                        </div>
                        <input type="datetime-local" id="registration_deadline" name="registration_deadline" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus" required>
                    </div>
                </div>
            </div>

            <!-- 其他信息 -->
            <div class="space-y-6">
                <h3 class="text-lg font-semibold text-gray-800">活动详情</h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label for="location" class="block text-sm font-medium text-gray-700">活动地点 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                <i class="fa fa-map-marker"></i>
                            </div>
                            <input type="text" id="location" name="location" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus" required>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="max_volunteers" class="block text-sm font-medium text-gray-700">最大志愿者数量 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                <i class="fa fa-users"></i>
                            </div>
                            <input type="number" id="max_volunteers" name="max_volunteers" min="1" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus" required>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label for="service_hours" class="block text-sm font-medium text-gray-700">服务时长(小时) <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                                <i class="fa fa-clock-o"></i>
                            </div>
                            <input type="number" id="service_hours" name="service_hours" min="0.5" step="0.5" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus" required>
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="requirements" class="block text-sm font-medium text-gray-700">活动要求</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-400">
                            <i class="fa fa-list-ul"></i>
                        </div>
                        <textarea id="requirements" name="requirements" rows="3" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-bg focus:outline-none focus:form-input-focus resize-none"></textarea>
                    </div>
                </div>
            </div>

            <!-- 表单底部 -->
            <div class="pt-4 flex flex-col sm:flex-row justify-between items-center gap-4">
                <div class="text-sm text-gray-500">
                    <span class="text-red-500">*</span> 表示必填项
                </div>

                <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-primary to-accent text-white font-medium rounded-lg shadow-lg shadow-primary/30 btn-hover-effect">
                    <i class="fa fa-plus-circle mr-2"></i> 添加活动
                </button>
            </div>
        </form>
    </div>

    <!-- 页脚 -->
    <div class="mt-8 text-center text-gray-500 text-sm">
        <p>活动管理平台 | <a href="${pageContext.request.contextPath}/organization/guanli" class="text-primary hover:underline">返回活动列表</a></p>
    </div>
</div>

<script>
    // 添加表单提交处理
    document.getElementById('addActivityForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // 从页面上下文中获取 orgid
        const orgid = "${organizations.orgid}";

        // 收集表单数据
        const formData = {
            title: document.getElementById('title').value,
            cover_image: document.getElementById('cover_image').value,
            description: document.getElementById('description').value,
            start_time: document.getElementById('start_time').value,
            end_time: document.getElementById('end_time').value,
            registration_deadline: document.getElementById('registration_deadline').value,
            location: document.getElementById('location').value,
            max_volunteers: document.getElementById('max_volunteers').value,
            service_hours: document.getElementById('service_hours').value,
            requirements: document.getElementById('requirements').value,
            orgid: orgid // 将 orgid 加入请求体中
        };

        // 显示加载状态
        const submitButton = e.submitter;
        const originalContent = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 提交中...';

        const contextPath = "${pageContext.request.contextPath}";

        fetch(contextPath + "/organization/addActivity", {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        })
            .then(response => response.text())
            .then(data => {
                // 修改：移除alert提示，直接跳转
                window.location.href = contextPath + '/organization/guanli';
            })
            .catch(error => {
                // 只在错误时显示提示
                alert('添加活动失败: ' + error);
                submitButton.disabled = false;
                submitButton.innerHTML = originalContent;
            });
    });

</script>
</body>
</html>